import React, { useState, useEffect, useMemo } from 'react'
import { Select, Button, DatePicker, Form, Radio } from 'antd'
import { getRealtimeItems } from '&/api/electricity'
import { SearchOutlined } from '@ant-design/icons'
import moment from 'dayjs'

const Filter = ({ onQuery, paramsData, setParamsData }) => {
  // 从本地存储获取用户信息
  const values = JSON.parse(localStorage.getItem('user'))
  // 设定初始状态
  const [selectData, setSelectData] = useState([])
  const [industryNumber, setIndustryNumber] = useState(8)
  const [dateFormat, setDateFormat] = useState(
    paramsData.time_type == 1 ? 'YYYY-MM-DD HH:mm:00' : 'YYYY-MM-DD HH'
  )
  const [devType, setDevType] = useState([2, 3])
  const devTypes = [
    {
      dev_type: 2,
      dev_type_name: '产污设施'
    },
    {
      dev_type: 3,
      dev_type_name: '治污设施'
    }
  ]
  useEffect(() => {
    // 获取监测项数据
    getRealtimeItemsData()
  }, [])
  const minuteStep15Time = useMemo(
    () => moment().subtract(moment().minute() % 15, 'minute'),
    []
  )
  // 监测项接口
  const getRealtimeItemsData = () => {
    // 根据项目_id获取监测项数据
    getRealtimeItems({ project_id: values?.project_id }).then((result) => {
      const list = result.monitor_items.filter((item) => {
        return item.data_type_id == 8
      })
      setSelectData(list)
    })
  }
  // 时间粒度改变
  const onQueryChange = (v, t) => {
    if (t === 'time' && Array.isArray(v)) {
      onTimePresetsChange(v)
    }
    if (t === 'industry') {
      // 更新监测项
      setParamsData((state) => {
        setIndustryNumber(v)
        state.data_type_id = v

        return state
      })
    }
    if (t === 'statues') {
      // 更新时间粒度
      setParamsData((state) => {
        const newState = onTimeTypeChange(v, state)
        return newState
      })
    }
  }
  // 时间预设改变
  const onTimePresetsChange = (v) => {
    const t = {
      start_time: moment(v[0]).format(dateFormat),
      end_time: moment(v[1]).format(dateFormat)
    }
    setParamsData((state) => {
      return {
        ...state,
        ...t
      }
    })
  }
  // 时间类型改变
  const onTimeTypeChange = (v, state) => {
    const format = v == 1 ? 'YYYY-MM-DD HH:mm:00' : 'YYYY-MM-DD HH'
    const latter = v == 2 ? ':00:00' : ''
    setDateFormat(format)
    state.time_type = v
    state.start_time = moment(paramsData.start_time).format(format + latter)
    state.end_time = moment(paramsData.end_time).format(format + latter)
    return state
  }

  // 点击查询
  const click = () => {
    onQuery && onQuery(paramsData)
  }

  // 设置设备类型
  const setSelectedDevTypes = (v) => {
    setDevType(v)
  }

  return (
    <div>
      <Form layout="inline">
        <Form.Item label="时间">
          <DatePicker.RangePicker
            showTime={dateFormat == 'YYYY-MM-DD' ? false : true}
            showNow
            minuteStep={15}
            defaultValue={[
              moment(paramsData.start_time),
              moment(paramsData.end_time)
            ]}
            value={[moment(paramsData.start_time), moment(paramsData.end_time)]}
            format={dateFormat}
            onChange={(v) => onQueryChange(v, 'time')}
          />
        </Form.Item>
        <Form.Item label="监测项">
          <Select
            allowClear
            placeholder={`请选择`}
            defaultValue={paramsData.data_type_id}
            onChange={(v) => onQueryChange(v, 'industry')}
          >
            {selectData &&
              selectData.map((item) => (
                <Select.Option
                  value={item.data_type_id}
                  key={item.data_type_id}
                >
                  {item.data_type}
                </Select.Option>
              ))}
          </Select>
        </Form.Item>
        <Form.Item label="时间粒度">
          {industryNumber && industryNumber === 8 ? (
            <Select
              allowClear
              placeholder={`请选择`}
              defaultValue={paramsData.time_type}
              onChange={(v) => onQueryChange(v, 'statues')}
            >
              <Select.Option value={'1'} key={'1'}>
                刻钟
              </Select.Option>
              <Select.Option value={'2'} key={'2'}>
                小时
              </Select.Option>
              {/* <Select.Option value={'3'} key={'3'}>
                日
              </Select.Option> */}
            </Select>
          ) : (
            <Select
              allowClear
              placeholder={`请选择`}
              defaultValue={'1'}
              onChange={(v) => onQueryChange(v, 'statues')}
            >
              <Select.Option value={'1'} key={'1'}>
                刻钟
              </Select.Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={click} icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
      </Form>
      {/* <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'nowrap'
        }}
      >
        <Form>
          <Form.Item label="设备类型">
            <Select
              mode="multiple"
              allowClear
              style={{ minWidth: '280px' }}
              placeholder={`请选择设备类型（可多选）`}
              value={devType}
              onChange={setSelectedDevTypes}
            >
              {devTypes.map((dev) => (
                <Select.Option value={dev.dev_type} key={dev.dev_type}>
                  {dev.dev_type_name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </div> */}
    </div>
  )
}

export default Filter
